<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>资产预警趋势</span>
      </div>
    </template>
    <div class="chart-container" ref="chartRef"></div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, nextTick, toRaw } from "vue";
import * as echarts from "echarts";
import variables from "@/assets/styles/variables.module.scss";
import useSettingsStore from "@/store/modules/settings";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const settingsStore = useSettingsStore();
const chartRef = ref(null);
let chart = null;

const colorArr = ["#546fc6", "#90cc76", "#FBBF24", "#ed6663"];

const initChart = () => {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);
  updateChart();

  window.addEventListener("resize", () => {
    chart?.resize();
  });
};

const updateChart = () => {
  if (!chart || !props.data) return;

  const rawData = toRaw(props.data);

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "#ddd",
        },
      },
    },
    legend: {
      data: [
        { name: "租金比对预警", icon: "rect" },
        { name: "合同合规预警", icon: "rect" },
        { name: "空置监测预警", icon: "rect" },
        // {
        //   name: "无合同",
        //   icon: "circle",
        // },
      ],
      top: 0,
      left: "center",
      itemWidth: 16,
      itemHeight: 8,
      itemGap: 30,
      textStyle: {
        fontSize: 13,
        color: "#666",
        padding: [0, 0, 0, 6],
        fontWeight: "normal",
      },
      icon: "rect",
      selectedMode: true,
      inactiveColor: "#ccc",
    },
    grid: {
      top: 60,
      left: 20,
      right: 30,
      bottom: 0,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: rawData.dates,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#999",
        fontSize: 12,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "value",
        name: "预警数量",
        nameTextStyle: {
          color: "#999",
          fontSize: 12,
          padding: [0, 30, 0, 0],
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#999",
          fontSize: 12,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#f0f0f0",
          },
        },
      },
      // {
      //   type: "value",
      //   name: "无合同数量",
      //   nameTextStyle: {
      //     color: "#999",
      //     fontSize: 12,
      //     padding: [0, 0, 0, 30],
      //   },
      //   axisLine: {
      //     show: false,
      //   },
      //   axisTick: {
      //     show: false,
      //   },
      //   axisLabel: {
      //     color: "#999",
      //     fontSize: 12,
      //   },
      //   splitLine: {
      //     show: false,
      //   },
      // },
    ],
    series: [
      {
        name: "租金比对预警",
        type: "line",
        data: rawData.series[0]?.data || [],
        smooth: true,
        symbol: "circle",
        symbolSize: 6,
        showSymbol: true,
        lineStyle: {
          width: 4,
          color: colorArr[0],
        },
        itemStyle: {
          color: "#fff",
          borderColor: colorArr[0],
          borderWidth: 3,
        },
      },
      {
        name: "合同合规预警",
        type: "line",
        data: rawData.series[1]?.data || [],
        smooth: true,
        symbol: "circle",
        symbolSize: 6,
        showSymbol: true,
        lineStyle: {
          width: 4,
          color: colorArr[1],
        },
        itemStyle: {
          color: "#fff",
          borderColor: colorArr[1],
          borderWidth: 3,
        },
      },
      {
        name: "空置监测预警",
        type: "line",
        data: rawData.series[2]?.data || [],
        smooth: true,
        symbol: "circle",
        symbolSize: 6,
        showSymbol: true,
        lineStyle: {
          width: 4,
          color: colorArr[2],
        },
        itemStyle: {
          color: "#fff",
          borderColor: colorArr[2],
          borderWidth: 3,
        },
      },
      // {
      //   name: "无合同",
      //   type: "line",
      //   yAxisIndex: 1,
      //   data: rawData.series[3]?.data || [],
      //   smooth: true,
      //   symbol: "circle",
      //   symbolSize: 6,
      //   showSymbol: false,
      //   lineStyle: {
      //     width: 2,
      //     color: variables.dangerColor,
      //   },
      //   itemStyle: {
      //     color: variables.dangerColor,
      //     borderWidth: 0,
      //   },
      // },
    ],
  };

  nextTick(() => {
    chart.setOption(option);
    chart.resize();
  });
};

watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      nextTick(() => {
        if (!chart) {
          initChart();
        } else {
          updateChart();
        }
      });
    }
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  nextTick(() => {
    initChart();
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    chart?.resize();
  });
  chart?.dispose();
});
</script>

<style lang="scss" scoped>
.box-card {
  height: 260px;
  border: none;
  :deep(.el-card__body) {
    height: calc(100% - 55px);
    padding: 10px 20px !important;
  }
  :deep(.el-card__header) {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
  }
}
.card-header {
  font-weight: 500;
  font-size: 16px;
  color: #303133;
}
.chart-container {
  height: 200px;
  overflow: hidden;
}
</style>
